const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const rootPath = path.resolve(__dirname, "..")
const webpack = require("webpack")

module.exports = {
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    mainFields: ["main", "module", "browser"],
  },
  entry: path.resolve(rootPath, "src", "App.tsx"),
  target: "electron-renderer",
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /.scss$/,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
      {
        test: /.less$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                strictMath: true,
              },
              javascriptEnabled: true,
            },
          },
        ],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      // file loader, for loading files referenced inside css files
      // {
      //   test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
      //   use: [
      //       {
      //           loader: 'url-loader',
      //           options: {
      //               name: '[name].[ext]',
      //               outputPath: 'fonts/',
      //           },
      //       },
      //   ],
      // },
      {
        test: /\.(png|jpg|gif|jpeg|svg)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 40,
              esModule: false, // 此处添加配置
              name: "img/[name].[hash:8].[ext]",
            },
          },
        ],
      },
    ],
  },
  devServer: {
    contentBase: path.join(rootPath, "dist/renderer"),
    historyApiFallback: true,
    compress: true,
    hot: true,
    port: 4000,
    publicPath: "/",
  },
  output: {
    path: path.resolve(rootPath, "dist/renderer"),
    filename: "js/[name].js",
    publicPath: "./",
  },
  plugins: [
    new HtmlWebpackPlugin(),
    // new webpack.LoaderOptionsPlugin({
    //   // test: /\.xxx$/, // may apply this only for some modules
    //   options: {
    //     // css相关配置
    //     css: {
    //       sourceMap: true, // 开启 CSS source maps?
    //       loaderOptions: {
    //         less: {
    //           javascriptEnabled: true,
    //         },
    //       },
    //     },
    //   },
    // }),
  ],
}
